<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" type="image/x-icon" href="/image/logo.png"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <title>Users</title>




  <!-- Bootstrap core CSS -->
  <link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="/css/dashboard.css" rel="stylesheet">

</head>
<body>
  <div th:replace="component::#headerMenu"></div>
  <div class="container-fluid">
    <div class="row">
      <div th:replace="component::#sidebarMenu"></div>
      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2">Users</h1>
          <div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="addUser()">
              Add User
            </button>

            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">User operation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form id="myForm" th:action="@{/users/addUser}" method="post">
                      <div class="form-group row" hidden>
                        <label for="id" class="col-sm-2 col-form-label" >id</label>
                        <div class="col-sm-10">
                          <input type="text" id="id" class="form-control" name="id">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputUsername" class="col-sm-2 col-form-label" >Username</label>
                        <div class="col-sm-10">
                          <input type="text" id="inputUsername" class="form-control" name="username">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                        <div class="col-sm-10">
                          <input type="password" id="inputPassword" class="form-control" name="password">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputAge" class="col-sm-2 col-form-label" >Age</label>
                        <div class="col-sm-10">
                          <input type="text" id="inputAge" class="form-control" name="age">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputGender" class="col-sm-2 col-form-label" >Gender</label>
                        <div class="col-sm-10">
                          <input type="text" id="inputGender" class="form-control" name="gender">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputAddress" class="col-sm-2 col-form-label" >Address</label>
                        <div class="col-sm-10">
                          <input type="text" id="inputAddress" class="form-control" name="address">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputDrivingLicense" class="col-sm-2 col-form-label" >Driving license</label>
                        <div class="col-sm-10">
                          <input type="text" id="inputDrivingLicense" class="form-control" name="drivingLicense">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputPhoneNumber" class="col-sm-2 col-form-label" >Phone number</label>
                        <div class="col-sm-10">
                          <input type="text" id="inputPhoneNumber" class="form-control" name="phoneNumber">
                        </div>
                      </div>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="submit" class="btn btn-primary">Save changes</button>
                    </form>
                  </div>
                  <div class="modal-footer"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="table table-responsive">
          <table class="table table-bordered table-hover">
            <tbody class="text-center">
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Password</th>
              <th>Age</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Driving license</th>
              <th>Phone number</th>
              <th>Operation</th>
            </tr>
            <tr th:each="user:${data.records}">
              <td th:text="${user.id}"></td>
              <td th:text="${user.username}"></td>
              <td th:text="${user.password}"></td>
              <td th:text="${user.age}"></td>
              <td th:text="${user.gender}"></td>
              <td th:text="${user.address}"></td>
              <td th:text="${user.drivingLicense}"></td>
              <td th:text="${user.phoneNumber}"></td>
              <td>
                <a th:href="'javascript:deleteUser('+${user.id}+')'" >删除</a>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                        th:onclick="editUser([[${user.id}]], [[${user.username}]], [[${user.password}]], [[${user.age}]], [[${user.gender}]], [[${user.address}]], [[${user.drivingLicense}]], [[${user.phoneNumber}]])">Edit</button>
              </td>
            <tr>
            </tbody>
          </table>
          <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
              <li class="page-item" th:if="${data.hasPrevious()}"><a class="page-link" th:href="'selectUser?pageNumber='+${data.current-1}+'&pageSize='+${data.size}">Previous</a></li>
              <script type="text/javascript">
                var total = [[${data.total}]]
                var size = [[${data.size}]]
                var current = [[${data.current}]]
                var loop = parseInt(total / size)
                if(total % size !== 0) loop += 1
                for(i = 1; i <= loop; ++i){
                  if(i === current){
                    document.write("<li class=\"page-item active\"><a class=\"page-link\" href=\"selectUser?pageNumber=" + i + "&pageSize=" + size + "\">" + i + "</a></li>")
                  } else {
                    document.write("<li class=\"page-item\"><a class=\"page-link\" href=\"selectUser?pageNumber=" + i + "&pageSize=" + size + "\">" + i + "</a></li>")
                  }
                }
              </script>
              <li class="page-item" th:if="${data.hasNext()}"><a class="page-link" th:href="'selectUser?pageNumber='+${data.current+1}+'&pageSize='+${data.size}">Next</a></li>
            </ul>
          </nav>
        </div>
      </main>
    </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="/assets/dist/js/vender/jquery.slim.min.js"><\/script>')</script>
  <script src="/assets/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/js/feather.min.js"></script>
  <script src="/js/component.js"></script>
<script type="text/javascript">
  function deleteUser(obj){
    if(window.confirm("确认删除吗？")){
      window.location.href = baseUrl() + "/delete?id=" +  obj;
    }
  }
  function editUser(id, username, password, age, gender, address, drivingLicense, phoneNumber){
    document.getElementById("id").value = id
    document.getElementById("inputUsername").value = username
    document.getElementById("inputPassword").value = password
    document.getElementById("inputAge").value = age
    document.getElementById("inputGender").value = gender
    document.getElementById("inputAddress").value = address
    document.getElementById("inputDrivingLicense").value = drivingLicense
    document.getElementById("inputPhoneNumber").value = phoneNumber
    document.getElementById("myForm").action = baseUrl() + "/editUser"
  }
  function addUser(){
    document.getElementById("id").value = ""
    document.getElementById("inputUsername").value = ""
    document.getElementById("inputPassword").value = ""
    document.getElementById("inputAge").value = ""
    document.getElementById("inputGender").value = ""
    document.getElementById("inputAddress").value = ""
    document.getElementById("inputDrivingLicense").value = ""
    document.getElementById("inputPhoneNumber").value = ""
    document.getElementById("myForm").action = baseUrl() + "/addUser"
  }
  function baseUrl(){
    var pathName=window.document.location.pathname;
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    return projectName;
  }
</script>
</body>
</html>